import Svg from "@/components/base/Svg"
import { css } from "@emotion/react"
import { useMemo, useRef, useState } from "react"
import { createLogger } from "@/utils/logger"

const logger = createLogger("BaseTextInputItem")

type Props = {
    value?: string
    onChange: (value: string) => void
    defaultValue?: string
    disabled?: boolean
    status?: "idle" | "focus" | "error" | "valid"
    prefix?: React.ReactNode
    inputProps?: Omit<
        React.InputHTMLAttributes<HTMLInputElement>,
        "onChange" | "onFocus" | "onBlur" | "value" | "defaultValue" | "disabled" | "ref"
    >
}

export default function BaseTextInputItem(props: Props) {
    const {
        //
        value,
        onChange,
        defaultValue,
        disabled,
        status: _status,
        inputProps: _inputProps,
    } = props
    const inputRef = useRef<HTMLInputElement>(null)
    const [innerValue, setInnerValue] = useState<string>(value ?? defaultValue ?? "")
    const [status, setStatus] = useState<NonNullable<typeof _status>>(_status ?? "idle")

    const finalValue = innerValue ?? value ?? defaultValue
    const finalStatus = useMemo(() => {
        if (disabled) {
            return "idle"
        }
        return _status ?? status
    }, [disabled, _status, status])

    const BoxShadowColor = useMemo(() => {
        switch (finalStatus) {
            case "valid":
                return "#008000"
            case "error":
                return "#FF0000"
            case "focus":
                return "#0A6CFF"
            default:
                return "#e0e0e1"
        }
    }, [finalStatus])

    const ClearButtonColor = useMemo(() => {
        switch (finalStatus) {
            case "idle":
                return "#c9c9c9"
            case "valid":
                return "#008000"
            case "error":
                return "#FF0000"
            case "focus":
                return "#0A6CFF"
            default:
                return "#000000"
        }
    }, [finalStatus])

    const BackgroundColor = useMemo(() => {
        switch (finalStatus) {
            case "valid":
                return "#e0ffe0"
            case "error":
                return "#ffe0e0"
            case "focus":
                return "#e6f0ff"
            default:
                return "#ffffff"
        }
    }, [finalStatus])

    const PlaceholderColor = useMemo(() => {
        switch (finalStatus) {
            case "error":
                return "#ffadad"
            case "focus":
                return "#96c0ff"
            default:
                return "#c9c9c9"
        }
    }, [finalStatus])

    return (
        <div
            onClick={() => {
                inputRef.current?.focus()
            }}
            css={css`
                flex: 1;
                position: relative;
                display: flex;
                flex-direction: row;
                align-items: stretch;
                font-family: "Gilroy", sans-serif;
                transition:
                    box-shadow 0.2s ease-in-out,
                    background-color 0.2s ease-in-out;
                flex: 1;
                min-height: 40rem;
                border-radius: 8rem;
                padding: 0 16rem;
                box-shadow: inset 0 0 0 1.5rem ${BoxShadowColor};
                background-color: ${disabled ? "#f0f0f0" : BackgroundColor};
                cursor: ${disabled ? "not-allowed" : "text"};
                user-select: none;
            `}
        >
            <div
                css={css`
                    transition:
                        opacity 0.2s ease-in-out,
                        max-width 0.2s ease-in-out;
                    opacity: ${props.prefix ? 1 : 0};
                    max-width: ${props.prefix ? "86rem" : "0rem"};
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 16rem;
                    line-height: 24rem;
                    letter-spacing: 10%;
                    margin-right: ${props.prefix ? "8rem" : "0rem"};
                    transform: translateY(2%);
                `}
            >
                {props.prefix}
            </div>
            <input
                ref={inputRef}
                css={css`
                    /* text */
                    flex: 1;
                    font-weight: 400;
                    font-size: 16rem;
                    line-height: 24rem;
                    letter-spacing: 0%;
                    outline: none;
                    border: none;
                    background-color: transparent;
                    user-select: none;
                    pointer-events: none;
                    &[disabled] {
                        cursor: not-allowed;
                    }
                    color: ${ClearButtonColor};
                    /* placeholder */
                    &::placeholder {
                        color: ${PlaceholderColor};
                    }
                `}
                onFocus={() => setStatus("focus")}
                onBlur={(e) => {
                    onChange(e.target.value)
                    setInnerValue(e.target.value)
                    setStatus("idle")
                }}
                onChange={(e) => {
                    setInnerValue(e.target.value)
                }}
                type="text"
                value={finalValue}
                disabled={disabled}
                placeholder={"placeholder"}
                {..._inputProps}
            />
            {disabled ? null : (
                <Svg
                    src="base_image/clear_input.svg"
                    css={css`
                        transition: opacity 0.2s ease-in-out;
                        position: absolute;
                        width: 16rem;
                        height: 16rem;
                        right: 16rem;
                        top: 50%;
                        transform: translateY(-50%);
                        cursor: pointer;
                        opacity: ${finalValue ? 1 : 0};
                        pointer-events: ${finalValue ? "auto" : "none"};
                        user-select: none;
                        * {
                            fill: ${ClearButtonColor};
                        }
                    `}
                    onClick={() => {
                        if (inputRef.current) {
                            inputRef.current.focus()
                            setInnerValue("")
                        }
                    }}
                />
            )}
        </div>
    )
}
